<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>DS_SaoDiSheng</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8" />
    <link rel="stylesheet" href="css/font.css">
    <link rel="stylesheet" href="css/xadmin.css">
    <script src="lib/layui/layui.all.js" charset="utf-8"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/vue/2.5.16/vue.min.js"></script>
    <script src="js/axios/0.17.1/axios.min.js"></script>
    <script type="text/javascript" src="js/xadmin.js"></script>
</head>
<body>
<div class="x-nav">
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>
<div class="layui-fluid" id="workingArea">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <div class="layui-card-header">
                        <button class="layui-btn" onclick="xadmin.open('添加订单', 'orderadd.html', 0, 800, 400)">
                            <i class="layui-icon"></i>添加
                        </button>
                    </div>
                </div>
                <div class="layui-card-body ">
                    <table class="layui-table layui-form">
                        <thead>
                        <tr>
                            <th>订单编号</th>
                            <th>寄件人信息</th>
                            <th>收件人信息</th>
                            <th>下单时间</th>
                            <th>配送时间</th>
                            <th>配送方式</th>
                            <th>配送人员</th>
                            <th>包裹</th>
                            <th>订单费用</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <!--这里的beans就是ViewModel层定义的数据-->
                        <template v-for="bean in beans ">
                            <tr>
                                <td>{{bean.id}}</td>
                                <td>{{bean.sender.name}}</td>
                                <td>{{bean.consignee.name}}</td>
                                <td>{{bean.createDate}}</td>
                                <td>{{bean.deliveryDate}}</td>
                                <td>{{bean.vehicle.name}}</td>
                                <td>{{bean.staff.name}}</td>
                                <td>{{bean.pg.name}}</td>
                                <td>{{bean.freight}}</td>
                                <td class="td-manage">
                                    <a @click="deleteBean(bean.id)" href="#nowhere">删除</a>
                                </td>
                            </tr>
                        </template>
                        </tbody>
                    </table>

                    <div class="pagination">
                        <ul class="pagination">
                            <li :class="{ disabled: pagination.first }" style="float: left; list-style-type:none; width: 20px; height: 20px;">
                                <a  href="#nowhere" @click="jump('first')">«</a>
                            </li>
                            <li :class="{ disabled: !pagination.hasPrevious }" style="float: left; list-style-type:none; width: 20px; height: 20px;">
                                <a  href="#nowhere" @click="jump('pre')">‹</a>
                            </li>

                            <li  v-for="i in pagination.navigatepageNums" style="float: left; list-style-type:none; width: 20px; height: 20px;">
                                <a href="#nowhere" @click="jumpByNumber(i-1)" >
                                    {{i}}
                                </a>
                            </li>

                            <li :class="{ disabled: !pagination.hasNext }" style="float: left; list-style-type:none; width: 20px; height: 20px;">
                                <a  href="#nowhere" @click="jump('next')">›</a>
                            </li>
                            <li :class="{ disabled: pagination.last }" style="float: left; list-style-type:none; width: 20px; height: 20px;">
                                <a  href="#nowhere" @click="jump('last')"> »</a>
                            </li>
                        </ul>
                    </div>
                    <div>分页跳转</div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    //判断是否为空
    function checkEmpty(value,text){

        if(null==value || value.length==0){
            alert(text+ "不能为空");
            return false;
        }
        return true;
    }
    //确实是否要删除
    function checkDeleteLink(){
        var confirmDelete = confirm("确认要删除");
        if(confirmDelete)
            return true;
        return false;
    }
    //分页跳转函数，向前跳或者向后跳，或者跳转到第一页或者最后一页。
    function jump(page,vue){
        if('first'== page && !vue.pagination.first)
            vue.list(0);

        else if('pre'== page &&	vue.pagination.hasPrevious )
            vue.list(vue.pagination.number-1);

        else if('next'== page && vue.pagination.hasNext)
            vue.list(vue.pagination.number+1);

        else if('last'== page && !vue.pagination.last)
            vue.list(vue.pagination.totalPages-1);
    }
    //分页跳转函数，跳转到指定页
    function jumpByNumber(start,vue){
        if(start!=vue.pagination.number)
            vue.list(start);
    }


    <!--前后端交互层-->
    $(function () {
        var data4Vue = {
            uri: 'orders',
            beans: [],
            pagination: {}
        };

        // ViewModel
        var vue = new Vue({
            el: "#workingArea",      // 关联作用域
            data: data4Vue,
            mounted:function () {// mounted表示这个Vue对象加载成功
                this.list(0);       // 调用相应的功能
            },
            // 定义方法
            methods: {
                list: function (start) {
                    var url = this.uri + "?start=" + start;      // 整理后台控制器的路径
                    axios.get(url).then(function (response) {
                        vue.pagination = response.data;     // 将数据传入分页中
                        vue.beans = response.data.content;      // 将分页的内容转成对象实例
                    });
                },
                deleteBean: function (id) {
                    if (!checkDeleteLink())
                        return;
                    var url = this.uri + "/" + id;
                    axios.delete(url).then(function (response) {
                        if (0 != response.data.length)
                            alert(response.data);
                        else
                            vue.list(0);
                    });
                },
                jump: function (page) {
                    jump(page, vue);        // 该页面跳转方法定义在functions.html中
                },
                jumpByNumber: function (start) {
                    jumpByNumber(start, vue);
                }
            }
        });
    });
</script>

</html>